<template>
    <div class="cate-recommend">
        <div class="cate-recommend-item" v-for="item in list" :key="item.id"
        @click="goDetails(item._id)">
            <img :src="item.img?item.img:item.imgUrl" alt="">
            <p>
                <van-text-ellipsis :content="item.name" rows="2" style="font-size: 16px;font-weight: bold;"/>
            </p>
            <p>{{ item.oldPrice }}</p>
            <p>￥ {{ item.newPrice }}</p>
        </div>
    </div>
</template>

<script setup lang="ts">
import {useRouter} from 'vue-router'
const router = useRouter()
const {list} = defineProps({
    list: Array
})
//跳转详情页
const goDetails = (id: number) => {
    router.push({
        name: 'detail',
        params: {
            id: id
        },
        
    })
}
</script>

<style lang="scss">
.cate-recommend{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 100px;
    .cate-recommend-item{
        border-radius: 10px;
        background-color: white;
        width: 46%;
        margin: 2%;
        img{
            width: 100%;
        }
        p:nth-of-type(1){
            height: 50px;
        }
        p:nth-of-type(2){
            color: gray;
            text-decoration: line-through;
        }
        p:nth-of-type(3){
            color: rgb(218, 24, 33);
            font-size: 16px;
        }
    }
}
</style>